/* 写样式起手式，先去除浏览器的公共样式，
并设置border-box,防止元素盒子被内边距和边框撑大 */
* {
    /* *星号把所有的元素全选 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 设背景图 */
/* body的父元素是html,100%是指和HTML一样高，html是页面的最顶层元素，
高度100%是相对父元素来说高度是100即和父元素浏览器一样高 */
html, body {
    height: 100%;
}
body{
    /* 当前在css目录下，要回到blog目录下才能找到image,
    ..是回退到当前目录的上一级目录中 */
    background-image: url(../image/背景图片.jpg);
    /* 防止图片平铺 */
    background-repeat: no-repeat;
    /* 图片位置全覆盖，位置水平居中，垂直居中 */
    background-size: cover;
    background-position: center center;
}
/* 设置导航栏样式 */
.nav {
    /* 设置宽度和body一样宽，即和浏览器一样宽 */
    width: 100%;
    height: 50px;
    /* 背景颜色和字体颜色 rgba的a代表透明度，是0-1的数0全透，1实心*/
    background-color: rgba(50, 50, 50,0.4);
    color: white;
    /* 导航栏里面的元素要居中，开启弹性布局 */
    display: flex;
    align-items: center;

}
.nav img {
    /* 修改导航栏图片 */
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;
    /* 使图片变圆 让内切圆半径变为宽度的一半*/
    border-radius: 50%;
}
.nav .spacer {
    width: 70%;
}
.nav a{
    /* 把a标签字体设为白色，并去掉下划线 */
    color:white;
    text-decoration: none;
/* 设置字体元素的内边距，可以增大点击率上下0，左右内边距为10像素 */
    padding:0 10px ;
}
/* 编写页面主题样式 */
.container {
    width: 1100px;
    /* 高度若要填充满整个页面，要用（页面视为）100%(减号左右必须有空格)-导航栏的高度 */
    height: calc(100% - 50px);
    /* 水平居中 */
    margin :0 auto;
    /* 看效果 */
    /* background-color: blue ; */
    /* 开启弹性布局 */
    display: flex;
    /* 左右等间距 */
    justify-content: space-around;
     /* 元素垂直居中 */
    align-items: center;
}
.container-left {
    /* 高度设为百分数是相对父元素来讲，其父元素为container,已经设过了 */
    height: 100%;
    width: 200px;
}
.container-right {
    height: 100%;
    width: 895px;
    background-color: rgba(255, 255,255, 0.7);
    border-radius: 10px;
    /* 给右边博客页面元素加上滚动条，若内容溢出页面则自动加滚动条 */
    overflow: auto;
}
.card {
    background-color: rgba(255, 255,255, 0.7);
    border-radius: 15px;
    /* 设置内边距让内容和边框又上下左右30px的间距 */
    padding: 30px;
}
.card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}
.card h3{
    text-align: center;
    padding: 8px;
}
.card a{
    /* a标签是行内元素，要设为块状元素才能设置出我们想要的样式 */
    display: block;
    text-align: center;
    /* 去掉下划线 */
    text-decoration: none;
    padding: 3px;
}
.counter{
    /* 想让剩下的均匀分布开弹性布局 */
    display: flex ;
    justify-content: space-around;
}